<template>
  <div>
  <div v-if="!show" style="color: white;width: 200px;margin: 200px auto;text-align: center">
    <h2>功能未上线</h2>
    <el-button type="text" @click="()=>{this.show=true}">静态页面预览</el-button>
  </div>
  <div class="out_box" v-if="show">
    <!--   管理员首页顶部统计/活动发布   -->
    <div class="total_head">
      <MasterHead></MasterHead>
    </div>
    <!-- 首页统计图图表 -->
    <div class="charts_home">
      <!--   横板一   -->
      <div class="declare">
        <!--   申报总人数统计   -->
        <div class="total_declare">
          <MasterCharts></MasterCharts>
        </div>
        <!-- 男女人数统计 -->
        <div class="total_gender">
          <MasterGenderChart></MasterGenderChart>
        </div>
      </div>
      <!--   横板二   -->
      <div class="" style="width: 100%;height: 380px;margin-top: 10px">
        <InsideAndOutside></InsideAndOutside>
      </div>
      <div style="width: 100%;height: 380px;margin-top: 10px">
        <Audit></Audit>
      </div>
    </div>
    <!--  申报材料  -->
    <div class="report-file" style="width: 100%;">
      <ReportF></ReportF>
    </div>
    <!--    -->
    <div>
      <Questions></Questions>
    </div>
  </div>
  </div>
</template>

<script>
  import MasterCharts from "./home/MasterCharts";
  import MasterHead from "./home/MasterHead";
  import MasterGenderChart from "./home/MasterGenderChart";
  import InsideAndOutside from "./home/InsideAndOutside";
  import Audit from "./home/Audit";
  import ReportF from "./home/ReportF";
  import Questions from "./home/Questions";

  export default {
    name: "MasterHome",
    components: {
      MasterCharts,
      MasterHead,
      MasterGenderChart,
      InsideAndOutside,
      Audit,
      ReportF,
      Questions,
    },
    data(){
      return{
        show: false
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0 auto;
    padding: 0;
  }

  div {
    /*border: 1px solid red;*/
    width: 100%;
  }

  .out_box {
    width: 1180px;
    padding: 10px;
    /*border: 1px solid red;*/
    color: #ffffff;
    margin-bottom: 20px;
  }

  /*顶部统计*/
  .total_head {
    text-align: center;
    color: #f9fafc;
  }

  /**/
  .charts_home {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .declare {
    width: 100%;
    height: 380px;
    text-align: center;
    /*font-size: medium;*/
    display: flex;
  }

  .total_declare, .total_gender {
    display: inline-block;
  }

  .total_declare {
    height: 380px;
    margin-right: 10px;
    flex: 8;
  }

  .total_gender {
    flex: 16.8;
    height: 380px;
    background-color: rgba(37, 80, 174, 0.55);
  }

  /*  */

</style>
